<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp" %>
<script src="http://g.tbcdn.cn/kissy/k/1.4.8/seed-min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/javascript/global/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="static/javascript/global/ueditor/ueditor.all.js"></script>
<link rel="stylesheet" type="text/css" href="static/javascript/global/ueditor/themes/default/css/ueditor.min.css">
<script type="text/javascript" src="static/javascript/global/ueditor/ueditor.parse.min.js"></script>
    
<style type="text/css">
	.main-md DIV.form-group{border-bottom: 1px dashed #ddd;}
	.grid .g-u {
	   display:inline-block
	}
</style>

<div class="alert alert-danger"><span class="text">${message }</span></div>
<div class="panel panel-default">
	<div class="panel-heading">
		<div class="row">
			<div class="pull-left">
				<div class="panel-title">品牌维护列表</div>
			</div>
			<div class="pull-right">
			<button class="btn btn-default" data-toggle="modal" data-target="#myModal">添加</button>
			<div id="test"></div>
			</div>
		</div>
		
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-body">
		<form name="itemForm" action="admin/Brand" method="get">
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>品牌名称</th>
					<th>品牌logo</th>
					<th>品牌介绍</th>
					<th>品牌分数</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="entry" items="${dataList }">
					<tr>
						<td>${entry.brandName }</td>
						<td> <img alt="" src="${entry.logoUrl }" onload="javascript:DrawImage(this,100,100)"></td>
						<td>${entry.introduction }</td>
						<td>${entry.score }</td>
						<td>
							<div class="btn-group">
								<button type="button" class="btn btn-info" onclick="deleteNode(this,'${entry.id}')">删除</button>
							</div>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		
		</form>
	</div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
  <div class="modal-dialog">  
    <div class="modal-content">  
      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
        <h4 class="modal-title">品牌添加</h4>  
      </div>  
      <div class="modal-body">  
            <div>
 	 			<form class="form-horizontal validate" role="form" id="itemForm" name="itemForm">
		  		      <div class="form-group">
					    <label for="brandName" class="col-sm-2 control-label">品牌名称</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="brandName" name="brandName" required="品牌名称不能为空" >
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="logoUrl" class="col-sm-2 control-label">品牌LOGO</label>
					    <div class="col-sm-10">
					      <div class="grid">
						    <input type="file" class="g-u form-control" id="J_UploaderBtn" value="上传图片" name="Filedata" required="品牌logo不能为空" accept="image/*" >
						    <input type="hidden" id="J_Urls" name="logoUrl" value="" />
						    <div class="g-u">还可以上传<span id="J_UploadCount">1</span>张图片</div>
						  </div>
						  <ul id="J_UploaderQueue" class="grid"></ul>
					    </div>
					  </div>
					   <div class="form-group">
					    <label for="introduction" class="col-sm-2 control-label">品牌介绍</label>
					    <div class="col-sm-10">
					      <textarea id="introduction" name="introduction" class="form-control" rows="3" > </textarea>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="score" class="col-sm-2 control-label">品牌分数</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="score" name="score"  required="品牌分数不能为空">
					    </div>
					  </div>
			      </form>
			 </div>
      </div>  
      <div class="modal-footer">  
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
        <button type="button" class="btn btn-primary" onclick="javascript:saveNode()">保存</button>  
      </div>  
    </div>
  </div>  
</div> 
<script type="text/javascript">
$(document).ready(function(){
	<c:if test="${empty message }">$(".alert").hide();</c:if>
});



function deleteNode(target, objId){
	$("#itemForm").goAjax({semantic: false, checkLogin: false,
		url: "admin/brand/delete",
		data:{brandId: objId},
		success: function(jsonData) {
			if(true == jsonData.success){
   				alert("删除成功");
   			} else {
   				alert("删除失败");
   			}
			window.location.reload();
		}
	});
}


function saveNode(){
	var validator = $("#itemForm").validate({meta:"validate"});
	if(validator.form()){
		$("#itemForm").goAjax({semantic: false, checkLogin: false,
			url: "admin/brand/doAdd",
			data:{},
			success: function(jsonData) {
				if(true == jsonData.success){
					
       				alert('保存成功!');
       			} else {
       				alert( '保存失败!');
       			}
				window.location.reload();
			}
		});
	}
}

var S = KISSY;
S.config({
    packages:[
        {
            name:"kg",
            path:"http://g.tbcdn.cn/kg/",
            charset:"utf-8",
            ignorePackageNameInUri:true
        }
    ]
});

if (S.Config.debug) {
    var srcPath = "../";
    S.config({
        packages:[
            {
                name:"kg/uploader/2.0.2",
                path:srcPath,
                charset:"utf-8",
                ignorePackageNameInUri:true
            }
        ]
    });
}

S.use('kg/uploader/2.0.2/index,kg/uploader/2.0.2/themes/imageUploader/index,kg/uploader/2.0.2/themes/imageUploader/style.css', function (S, Uploader,ImageUploader) {
    //上传组件插件
    var plugins = 'kg/uploader/2.0.2/plugins/auth/auth,' +
            'kg/uploader/2.0.2/plugins/urlsInput/urlsInput,' +
            'kg/uploader/2.0.2/plugins/proBars/proBars,' +
            'kg/uploader/2.0.2/plugins/filedrop/filedrop,' +
            'kg/uploader/2.0.2/plugins/preview/preview';

    S.use(plugins,function(S,Auth,UrlsInput,ProBars,Filedrop,Preview){
        var uploader = new Uploader('#J_UploaderBtn',{
            //处理上传的服务器端脚本路径
            action:"/upload/doUpload",
            multiple:true
        });
        //使用主题
        uploader.theme(new ImageUploader({
            queueTarget:'#J_UploaderQueue'
        }))
                //验证插件
                uploader.plug(new Auth({
                    //最多上传个数
                    max:1,
                    //图片最大允许大小
                    maxSize:6000
                }))
                //url保存插件
                .plug(new UrlsInput({target:'#J_Urls'}))
                //进度条集合
                .plug(new ProBars())
                //拖拽上传
                .plug(new Filedrop())
                //图片预览
                .plug(new Preview())
        ;
    });
})

//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
	//参数(图片,允许的宽度,允许的高度)
	var image=new Image();
	image.src=ImgD.src;
	if(image.width>0 && image.height>0){
	flag=true;
	if(image.width/image.height>= iwidth/iheight){
	if(image.width>iwidth){ 
	ImgD.width=iwidth;
	ImgD.height=(image.height*iwidth)/image.width;
	}else{
	ImgD.width=image.width; 
	ImgD.height=image.height;
	}
	ImgD.alt=image.width+"×"+image.height;
	}
	else{
	if(image.height>iheight){ 
	ImgD.height=iheight;
	ImgD.width=(image.width*iheight)/image.height; 
	}else{
	ImgD.width=image.width; 
	ImgD.height=image.height;
	}
	ImgD.alt=image.width+"×"+image.height;
	}
	}
} 
</script>
